<template>
  <div>
    <div class="mine-detail flex">
      <div class="per flex w-full" @click="navigate('setting')">
        <image class="user-face" :src="userInfo?.face || '/static/default.png'" />
        <div class="user-info" w-full flex justify-between align-items>
          <div>
            <div class="name">{{ userInfo?.nickName || '注册/登录' }}</div>
            <div v-if="userInfo?.sex != undefined">
              <nut-tag plain>{{ userInfo.sex == 1 ? '男生' : '女生' }}</nut-tag>
            </div>
          </div>
          
          <div mt-10rpx text-size-28rpx class="name">
            可用积分:{{ userInfo?.points || 0 }}
          </div>
        </div>
      </div>
      <div class="setup" flex>
        <!-- <div @click="navigate('setting')">
          <nut-icon name="setting" size="28rpx"></nut-icon>
        </div>
        <div ml-20rpx @click="navigate('im')">
          <nut-icon name="message" size="28rpx"></nut-icon>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { isLogin } from '@/utils/filters';
import { onShow } from '@dcloudio/uni-app';
import { navigateToLogin } from '@/utils/filters'
const userInfo = ref<any>({})
const props = defineProps<{
  userInfo?: any
}
>()

watch(() => props.userInfo, () => {
  userInfo.value = props.userInfo
}, { deep: true })

function navigate(to: string) {
  if (isLogin("auth")) {
    if (to === 'setting') {
      uni.navigateTo({
        url: '/pages/mine/user-detail?isEdit=2'
      })
    }
    else if (to === 'im') {
      uni.navigateTo({
        url: '/pages/im/contactList'
      })
    }
  }
  else {
    navigateToLogin()
  }
}

onShow(async () => {
  // 判断当前用户是否登录
  if (isLogin("auth")) {
    userInfo.value = isLogin('')
  }
})

</script>

<style scoped lang="scss">
.mine-detail {
  margin: 10rpx 0;
  justify-content: space-between;

  >.per {
    >.user-face {
      border-radius: 50%;
      width: 100rpx;
      height: 100rpx;
      flex-shrink: 0;
    }

    >.user-info {

      font-weight: bold;
      margin-left: 20rpx;
    }
  }
}
</style>
